<template>
  <div class="personOldDiv" id="userId">
    <h2>我的闲置：</h2>
    <!--数据列表-->
    <!--根据商品名搜索-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="商品图">
        <template slot-scope="scope">
          <img
            :src="scope.row.imageUrlList[0]"
            alt="加载中..."
            width="80"
            height="80"
          />
        </template>
      </el-table-column>
      <el-table-column label="商品名" prop="goodName"> </el-table-column>
      <el-table-column label="价格" prop="goodPrice"> </el-table-column>
      <el-table-column label="商品状态" prop="goodState"> </el-table-column>
      <el-table-column label="交易方式" prop="transactionMode">
      </el-table-column>
      <el-table-column label="交易地点" prop="goodAddress"> </el-table-column>
      <el-table-column label="商品类型" prop="goodCategory"> </el-table-column>
      <el-table-column label="商品描述" prop="goodDescription">
      </el-table-column>
      <el-table-column label="商品发布时间" prop="postTime"> </el-table-column>

      <el-table-column align="right" width="200">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入商品名搜索"
            ><el-button
              type="primary"
              @click="clickSearch"
              icon="el-icon-search"
              slot="append"
              v-loading.fullscreen.lock="fullscreenLoading"
            ></el-button
          ></el-input>
        </template>
        <template slot-scope="scope">
          <el-button
            size="medium"
            type="primary"
            style="margin-bottom: 5px"
            @click="handleEdit(scope.$index, scope.row)"
            >修改介绍</el-button
          >
          <el-button
            v-if="scope.row.goodState == '待出售'"
            size="medium"
            type="success"
            style="margin-bottom: 5px"
            @click="changeGoodState(scope.$index, scope.row)"
            >达成交易</el-button
          >
          <el-button
            v-if="scope.row.goodState == '已出售'"
            size="medium"
            type="info"
            disabled
            style="margin-bottom: 5px"
            >交易成功</el-button
          >
          <el-button
            size="medium"
            type="danger"
            v-if="scope.row.goodState == '已出售'"
            disabled
            style="margin-bottom: 5px"
            @click="handleEdit2(scope.$index, scope.row)"
            >取消出售</el-button
          >
          <el-button
            v-if="scope.row.goodState == '待出售'"
            size="medium"
            type="danger"
            style="margin-bottom: 5px"
            @click="handleEdit2(scope.$index, scope.row)"
            >取消出售</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryinfo.pageNum"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="queryinfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!--      商品介绍弹出框-->
    <el-dialog
      title="商品介绍"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <el-form :model="goodsForm" ref="goodsForm">
        <el-form-item label="商品名">
          <el-input v-model="goodsForm.goodName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" label-position="top">
          <el-input v-model="goodsForm.goodPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="交易方式" label-position="top">
          <el-select
            v-model="goodsForm.transactionMode"
            placeholder="请选择交易方式"
          >
            <el-option label="交易后付款" value="交易后付款"></el-option>
            <el-option label="付款后交易" value="付款后交易"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交易地点" label-position="top">
          <el-input
            v-model="goodsForm.goodAddress"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品类型" label-position="top">
          <el-select
            v-model="goodsForm.goodCategory"
            @change="setGoodCategoryId"
          >
            <el-option
              v-for="(category, index) in goodCategory"
              :key="index"
              :label="category.goodCategory"
              :value="category.goodCategoryId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品描述" label-position="top">
          <el-input
            type="textarea"
            placeholder="请输入商品描述"
            v-model="goodsForm.goodDescription"
            maxlength="250"
            show-word-limit
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDscrip" style="margin-top: 30px"
          >保存</el-button
        >
      </span>
    </el-dialog>

    <!--      弹出提示框-->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible2"
      width="30%"
      center
    >
      <div style="text-align: center">
        <h4>{{ dialogValue }}</h4>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="clickButton"
            style="margin-top: 30px"
            >确 定</el-button
          >
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "person-old",
  data() {
    return {
      tableData: [],
      search: "",
      currentPage: 1, //初始页
      queryinfo: {
        pageNum: 1,
        pageSize: 5,
        query: "",
      },
      total: 0,
      goodsForm: [],
      goodCategory: [],
      centerDialogVisible: false,
      centerDialogVisible2: false,
      dialogValue: "",
    };
  },
  mounted() {
    this.getGoods();
  },
  methods: {
    getGoods() {
      //加载数据
      let jsonObj = {};
      jsonObj = this.queryinfo;
      jsonObj.userId = window.sessionStorage.getItem("userId");
      let self = this;
      $.get(
        "http://waiterxiaoyy.free.idcfengye.com/web/getMyGoods",
        jsonObj,
        function (data) {
          if (data.code === 200) {
            self.tableData = data.data;
            self.total = data.count;
          }
        },
        "json"
      );
    },
    getGoodCateogry() {
      let self = this;
      $.get(
        "http://waiterxiaoyy.free.idcfengye.com/web/getGoodsCategory",
        function (data) {
          self.goodCategory = data.data;
        },
        "json"
      );
    },
    setGoodCategoryId() {
      this.goodsForm.goodCategoryId = this.goodsForm.goodCategory;
    },
    // 初始页currentPage、初始每页数据数pageSize和数据data
    handleSizeChange: function (size) {
      this.queryinfo.pageSize = size;
      this.getGoods();
      // console.log(this.pageSize)  //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.queryinfo.pageNum = currentPage;
      this.getGoods();
      // console.log(this.currentPage)  //点击第几页
    },
    handleEdit(index, row) {
      //点击了商品介绍按钮
      console.log(index, row);
      this.getGoodCateogry();
      this.goodsForm = row;
      this.centerDialogVisible = true;
    },
    changeGoodState(index, row) {
      console.log(row);
      this.$prompt(
        "请输入购买方的手机号进行交易确认，购买方需将此商品加入到其我想要中",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }
      )
        .then(({ value }) => {
          let self = this;
          var goodId = row.goodId;
          $.ajax({
            type: "POST",
            url:
              "http://waiterxiaoyy.free.idcfengye.com/web/changeGoodStateById?goodId=" +
              goodId +
              "&phone=" +
              value,
            dataType: "json",
            success: function (data) {
              if (data.code === 200) {
                self.$message.success(data.msg);
              } else {
                self.$message.error(data.msg);
              }
            },
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消交易",
          });
        });
    },
    handleEdit2(index, row) {
      //点击了取消出售按钮
      let jsonObj = {};
      this.$confirm("此操作将永久删除该闲置, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let self = this;
          var goodId = row.goodId;
          $.ajax({
            type: "POST",
            url:
              "http://waiterxiaoyy.free.idcfengye.com/web/deleteGoodInfoById?goodId=" +
              goodId,
            dataType: "json",
            success: function (data) {
              if (data.code === 200) {
                self.$message.success(data.msg);
                self.getGoods()
              } else {
                self.$message.error(data.msg);
              }
            },
          });
          self.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submitDscrip() {
      //点击了保存按钮
      let jsonObj = {};
      jsonObj.goodId = this.goodsForm.goodId;
      jsonObj.goodName = this.goodsForm.goodName;
      jsonObj.goodPrice = this.goodsForm.goodPrice;
      jsonObj.goodDescription = this.goodsForm.goodDescription;
      jsonObj.goodAddress = this.goodsForm.goodAddress;
      jsonObj.transactionMode = this.goodsForm.transactionMode;
      jsonObj.goodCategoryId = this.goodsForm.goodCategoryId;
      console.log(jsonObj);
      let jsonMsg = JSON.stringify(jsonObj);
      let self = this;
      $.post(
        "http://waiterxiaoyy.free.idcfengye.com/web/updateGoodInfo",
        jsonMsg,
        function (data) {
          if (data.code === 200) {
            self.centerDialogVisible = false;
            self.$message.success(data.msg);
            window.location.reload();
          } else {
            self.$message.error(data.msg);
          }
        },
        "json"
      );
    },
    clickButton() {
      this.centerDialogVisible2 = false;
      this.centerDialogVisible = false;
    },
    clickSearch() {
      this.getGoods();
    },
  },
};
</script>

<style scoped>
.personOldDiv {
  width: 80%;
  margin: 0 auto;
  padding-top: 50px;
}
</style>
